<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <title>AceHub - Administrator Homepage</title>

  <!-- 字体图标 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
  <link rel="shortcut icon" href="../header-footer/images/ico.jpg" type="image/x-icon" />

  <!-- 样式 -->
  <link rel="stylesheet" href="../Homepage/css/header.css" />
  <link rel="stylesheet" href="../header-footer/common.css" />
  <link rel="stylesheet" href="../student/student-profile.css" />
  <link rel="stylesheet" href="../teacher/teacher-profile.css" />
  <link rel="stylesheet" href="../account/admin-profile.css" />
</head>

<body>
  <!-- 页眉 -->
  <header class="navbar">
    <div class="nav">
      <div class="logo">
        <a href="../Homepage/WebsiteHomepage.html">
          <img src="../header-footer/images/logo.jpg" alt="AceHub" />
        </a>
      </div>
      <nav>
        <ul>
          <li><a href="../Homepage/WebsiteHomepage.html">home page</a></li>
          <li><a href="../Homepage/courseList.html">course</a></li>
          <li><a href="../Homepage/league.html">Alliance colleges</a></li>
          <li><a href="../Homepage/about-us.html">About Us</a></li>
        </ul>
      </nav>
    </div>

    <div class="search-box">
      <input type="text" id="searchInput" placeholder="Search for " />
      <button type="button" id="searchButton"><i class="fas fa-search"></i></button>
    </div>

    <div class="info">
      <!-- 用户信息区域，JS动态填充 -->
    </div>
  </header>

  <!-- 主体内容 -->
  <main class="student-profile-body">
    <!-- 侧边栏 -->
    <aside class="sidebar">
      <div class="sidebar-profile">
        <img id="sidebar-avatar" src="" alt="头像" />
        <p id="sidebar-username">administrators</p>
      </div>
      
        <!-- <a  class="sidebar-item active" href="#recommend">Recommended courses</a> -->
        <a   class="sidebar-item" href="#accounts">account management</a>
      
    </aside>

    <!-- 内容区 -->
    <section class="content">
      <!-- 推荐课程 -->
      <!-- <section id="recommend"style="display:none">
            <div class="tabs">
             <a class="tabs-item active" href="#recommend/course">Recommended courses</a> 
            <div class="tabs-content">
            <button id="recommend-btn" class="button">Set as recommended course</button>
            <div class="course-list" id="course-list"></div>
            </div>
      </section> -->

      <!-- 账号管理 -->
      <section id="accounts" style="display:block;">
        <!-- 账号管理内容 -->
        <h2 style="text-align: center;font-weight: 600;">account management</h2>
        <table id="accounts-table" border="1" cellspacing="0" cellpadding="8" style="width:100%; text-align:left;">
            <thead>
                <tr>
                    <th> profile picture</th>
                    <th>nickname</th>
                    <th>identity</th>
                    <th>state</th>
                    <th>operate</th>
                </tr>
            </thead>
            <tbody  id="account-tbody">
                <!-- 这里用JS填充账号行 -->
            </tbody>
        </table>
    </section>
    </section>
  </main>

  <!-- 课程卡片模板 -->
  <template id="course-template">
    <div class="course-card">
      <input type="checkbox" class="ui-checkbox" data-id="" />
      <img src="" alt="课程图片" />
      <div class="course-info">
        <h3 class="course-title"></h3>
        <p class="course-desc"></p>
      </div>
    </div>
  </template>

  <!-- 页脚 -->
  <footer class="footer">
    <div class="footer-content">
      <div class="footer-logo">
        <a href="#home"><img src="../header-footer/images/logo.jpg" alt="AceHub" /></a>
      </div>
      <div class="footer-text">
        <nav class="footer-nav">
          <ul>
            <li><a href="#about">About Us</a></li>
            <li><a href="#contact">Contact Us</a></li>
            <li><a href="#privacy">Privacy Policy</a></li>
            <li><a href="#terms">Term of service</a></li>
          </ul>
        </nav>
        <div class="footer-info">
          <p>&copy; 2025 AceHub. All rights reserved</p>
        </div>
      </div>
    </div>
  </footer>

  <!-- 脚本 -->
  <script src="../database.js"></script>
  <script src="../account/account.js"></script>
  <script src="../account/admin-profile-body.js"></script>

  <script>
    //Initialize user information after page loading is complete
window.onload = function () {
const userid = localStorage.getItem('token');
if (!userid) {
Please log in first! ');
window.location.href = '../account/login.html';
return;
}
if (userid !== 'admin') {
You do not have access to this page! ');
window.location.href = '../account/login.html';
return;
}
//Obtain user data
const userDataRaw = localStorage.getItem(userid);
let user = null;
try {
user = JSON.parse(userDataRaw);
} catch {
Alert ('User information abnormal, please log in again');
localStorage.removeItem('token');
window.location.href = '../account/login.html';
return;
}
if (!user || !user.avatar || !user.username) {
Alert ('Incomplete user information, please log in again');
localStorage.removeItem('token');
window.location.href = '../account/login.html';
return;
}
//Build header user information
let profileUrl = '../account/admin-profile.html';
Let profileName='Personal Center';
let accountUrl = '../account/admin-profile.html';
document.querySelector('.info').innerHTML = `
        <a href="${profileUrl}">
          <img id="user-head" src="${user.avatar}" alt="用户头像" />
        </a>
        <div class="card">
          <ul>
            <li><a href="${profileUrl}">${profileName}</a></li>
            <li><a href="${accountUrl}">Account Settings </a></li>
            <li><a id="logout" href="#logout">Log Out</a></li>
          </ul>
        </div>
      `;

      // 侧边栏头像昵称赋值
      document.getElementById('sidebar-avatar').src = user.avatar;
      document.getElementById('sidebar-username').textContent = user.username;

      // 登出事件绑定
      document.getElementById('logout').addEventListener('click', () => {
        localStorage.removeItem('token');
        window.location.href = '../Homepage/WebsiteHomepage.html';
      });
    };
  </script>
</body>

</html>
